<template>
  <!--  <div class="vip-app-main-wrapper">-->
  <div class="vip-app-main">
    <el-backtop :visibility-height="100" :bottom="100" :right="100" target=".vip-app-main" />
    <VipRouterView />
  </div>
  <!--  </div>-->
</template>

<script lang="ts" setup>
import { useRoutesStore } from '/@/store/modules/routes'
import { handleActivePath } from '/@lib/utils/routes'

defineOptions({
  name: 'VipAppMain'
})

const route = useRoute()
const routesStore = useRoutesStore()
const { tab, activeMenu } = storeToRefs<any>(routesStore)

watch(
  route,
  () => {
    if (tab.value.data !== route.matched[0].name) tab.value.data = route.matched[0].name
    activeMenu.value.data = handleActivePath(route)
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
//.vip-app-main-wrapper {
//  position: relative;
//  display: flex;
//  flex-flow: column;
//  flex: 1;
//  width: 100%;
//  //height: 100%;
//  //overflow: hidden;
//  overflow: auto;
//  overflow-x: hidden;
//  background-color: var(--layout-main-bg-color) !important;
//  //background-color: #f6f8f9;
//  transition: all var(--el-transition);
//}

.vip-app-main {
  //position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  padding: var(--el-padding);
  //z-index: calc(var(--el-z-index) + 10) !important;
}
</style>
